<template>
    <div class="comments">
        <!-- comment start -->
        <div class="comment" v-for="(v, index) in list" :key="'v'+index">
            <div class="user">
                <div class="img" :style="`background-image: url('${v.user.avatar}');`"></div>
                <div class="user">
                    <div class="name">{{v.user.uname}}</div>
                    <div class="detatime">{{v.created*1000 | formatDate('yyyy-MM-dd hh:mm:ss') }}</div>
                </div>
            </div>
            <div class="text">{{v.content}}</div>
            <div class="images">
                <img v-for="(item, index) in v.images" :key="'img'+index" :src="item" alt="" >
            </div>
            <div></div>
        </div>
        <!-- comment end -->
        
    </div>
</template>

<script>

export default {
    props:[
        "list"
    ],
    filters:{
        formatDate(value, fmt ){
            let getDate = new Date(value);
            let o = {
                'M+': getDate.getMonth() + 1,
                'd+': getDate.getDate(),
                'h+': getDate.getHours(),
                'm+': getDate.getMinutes(),
                's+': getDate.getSeconds(),
                'q+': Math.floor((getDate.getMonth() + 3) / 3),
                'S': getDate.getMilliseconds()
            };
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
            }
            for (let k in o) {
                if (new RegExp('(' + k + ')').test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
                }
            }
            return fmt;
        }
    }

    
}
</script>

<style lang="less" scoped>
    .comment{
        margin-top:30px;
        margin-bottom:50px;
        .user{
            .img{
                float: left;
                width: 110px;
                height: 110px;
                background-size: 100%;
                background-repeat: no-repeat;
                border-radius: 50%;
            }
            .user{
                float: left;
                padding-left: 25px;
                .name{
                    font-size: 35px;
                    line-height: 70px;
                }
                .detatime{
                    color: @66;
                    font-size: 25px;
                }
            }
        }
        .user::after{
            content: "";
            display: block;
            clear: both;
        }
        .text{
            margin-top:23px;
            font-size: 28px;
            line-height: 45px;
            text-indent: 2em;   
        }
        .images{
            margin-top:23px;
            img{
                width: 157px;
                height: 178px;
                object-fit: cover;
                margin: 9px;
            }
        }
    }
</style>

